﻿<script setup lang="ts" name="headerPackage2Property">
import WidgetProperty from '../../../../public/index.vue'
import { colorArray } from '@/views/Plugins/Designer/Website/utils'

const props = defineProps({
  config: { type: Object }
})
const emit = defineEmits(['change'])
const moduleProperty: any = ref(props.config || {})
watch(
  () => props.config,
  (val) => {
    moduleProperty.value = val
  },
  {
    immediate: true,
    deep: true
  }
)
const propertyChangeHandler = (v) => {
  console.log(v)
  emit('change', { type: 'package', value: v })
}
</script>

<template>
  <WidgetProperty :config="moduleProperty" @change="propertyChangeHandler">
    <ElFormItem label="标题">
      <el-input v-model="moduleProperty.default.name" placeholder="" />
    </ElFormItem>
    <ElFormItem label="欢迎语">
      <el-input v-model="moduleProperty.default.welcome" placeholder="" />
    </ElFormItem>
    <ElFormItem label="背景色">
      <el-color-picker v-model="moduleProperty.default.bgColor" show-alpha :predefine="colorArray()" />
    </ElFormItem>
  </WidgetProperty>
</template>

<style scoped lang="scss"></style>
